<template>
  <el-dialog :visible.sync="visibleDialog" append-to-body class="promoter_person" title="选择角色" width="620px">
    <div class="person_body clear">
      <div class="person_tree float-left">
        <el-input v-model="searchVal" placeholder="搜索角色" prefix-icon="el-icon-search"
                  class="mb10"
                  @input="getDebounceData(searchVal,2)"
        />
        <ul>
          <li v-for="(item,index) in roles" :key="index+'b'" class="check_box">
            <a :title="item.roleName" :class="func.toggleClass(checkedRoleList,item)&&'active'"
               @click="func.toChecked(checkedRoleList,item)"
            >
              <i class="iconfont icon-yonghutouxiang" />
              {{ item.roleName }}</a>
          </li>
        </ul>
      </div>
      <div class="has_selected float-left">
        <p class="clear">
          已选（{{ total }}）
          <a @click="delList">清空</a>
        </p>
        <ul>
          <li v-for="(item,index) in checkedRoleList" :key="index+'e'">
            <i class="iconfont icon-yonghutouxiang" />
            <span>{{ item.roleName }}</span>
            <i class="el-icon-close" @click="func.removeEle(checkedRoleList,item)" />
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixins from './mixins'
export default {
  mixins: [mixins],
  props: ['visible', 'data'],
  data() {
    return {
      checkedRoleList: []
    }
  },
  computed: {
    total() {
      return this.checkedRoleList.length
    }
  },
  watch: {
    visible(val) {
      this.visibleDialog = this.visible
      if (val) {
        this.getRoleList()
        this.searchVal = ""
        this.checkedRoleList = this.data.map(({name,roleKey,id})=>({
          roleName: name,
          roleKey: roleKey,
          id: id
        }))
      }
    },
    visibleDialog(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    saveDialog() {
      let checkedList = this.checkedRoleList.map((item)=>({
        id: item.id,
        roleKey: item.roleKey,
        roleName: item.roleName
      }))
      this.$emit('change', checkedList)
    },
    delList() {
      this.checkedRoleList = []
    }
  }
}
</script>

<style scoped>
@import "./dialog.css";
</style>
